<script setup lang="ts">
import { computed, ref } from 'vue'
import { Memo } from '@element-plus/icons-vue'
import { knowledgeAll } from '@/api/interface/web/knowledge'

const emit = defineEmits<{
  (e: 'change', val: any): void
}>()

const list = ref<any[]>([])

const initData = () => {
  list.value = []
  knowledgeAll({}).then((res: any) => {
    list.value = res.map((v: any) => {
      return {
        ...v,
        active: false,
      }
    })

    list.value.unshift({
      name: '所有知识库',
      id: '',
      active: true,
    })
  })
}
initData()

const handleClick = (index: any) => {
  list.value.forEach((v: any, i: any) => {
    if (i == index) {
      if (!v.active) {
        emit('change', v.id)
      }
      v.active = true
    } else {
      v.active = false
    }
  })
}

const actKnowledge = computed(() => {
  return list.value.filter((v: any) => v.active)[0]
})

defineExpose({
  actKnowledge,
})
</script>

<template>
  <div class="knowledge-picker-wrapper">
    <el-scrollbar height="100%">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'knowledge-item': true, active: item.active }"
        @click="handleClick(index)"
      >
        <div v-if="item.active" class="icon">
          <el-icon><Memo /></el-icon>
        </div>
        <div v-else class="icon">
          <el-icon><Memo /></el-icon>
        </div>
        <div class="name" :title="item.name">{{ item.name }}</div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-picker-wrapper {
  @include rect(100%, 100%);
  border: 1px solid #e2e8ed;
  border-radius: 4px;
  .knowledge-item {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 25px;
    box-sizing: border-box;
    cursor: pointer;
    .icon {
      font-size: 18px;
      margin-right: 10px;
      color: #666;
    }

    .name {
      @include ellipse();
      font-family: 'Source Han Sans CN-Regular';
      font-size: 16px;
    }
  }
  .knowledge-item.active {
    background: #f0f2ff;
    color: var(--theme-color);
    .icon {
      color: var(--theme-color);
    }
  }
}
</style>
